<template>
  <div class="offset-wrapper">
    <s-row class="row">
      <s-col class="item" span="8"> <span>col-8</span> </s-col>
      <s-col class="item" span="8"> <span>col-8</span> </s-col>
      <s-col class="item" span="4" offset="4"> <span>col-4</span> </s-col>
    </s-row>
    <s-row class="row">
      <s-col class="item" span="8"> <span>col-8</span> </s-col>
      <s-col class="item" span="5" offset="3"> <span>col-5</span> </s-col>
      <s-col class="item" span="4" offset="4"> <span>col-4</span> </s-col>
    </s-row>
    <s-row class="row">
      <s-col class="item" span="2" offset="6"> <span>col-2</span> </s-col>
      <s-col class="item" span="5" offset="3"> <span>col-5</span> </s-col>
      <s-col class="item" span="4" offset="4"> <span>col-4</span> </s-col>
    </s-row>
  </div>
</template>
<script>
import Row from "../../../src/components/Row.vue";
import Col from "../../../src/components/Col.vue";
export default {
  components: {
    "s-row": Row,
    "s-col":Col
  },

};
</script>
<style lang="scss" scoped>
  $background: #3eaf7c;
  $wrapper-top: 10px;
  $font-color: white;
  * { box-sizing: border-box; }
  .offset-wrapper { padding-top: $wrapper-top;
    > .row {
      > .item { text-align: center; color: $font-color;
        > span { display: block; background: $background; }
      }
    }
  }
</style>